<template>
	<view>
		<view class="edit-row">
			<text class="font28 color999">共35件商品，赶快抱回家吧～</text>
			<text class="font28" style="color: #FF5E00;" @click="edit(checkHide)">{{checkHide?'完成':'编辑'}}</text>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="tis" v-if="goodsList.length==0">购物车是空的哦~</view>
			<view class="item" v-for="(row,index) in goodsList" :key="index">
				<view class="item-store">
					<view class="checkbox-box" @tap="selected(index)">
						<label>
							<checkbox :value="0" color="#FF5E00" :checked="row.selected" @click="allCheck('item', index)" /><text></text>
						</label>
					</view>
					<view class="store">
						<image src="../../static/home/order/store.png" mode="widthFix"></image>
						<text class="font28 colorfont fontWeight">乐町官方旗舰店</text>
					</view>
				</view>
				<view class="row" v-for="(row,index) in goodsList" :key="index">
					<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']">
						<view class="checkbox-box" @tap="selected(index)">
							<label>
								<checkbox :value="0" color="#FF5E00" :checked="row.selected" @click="allCheck('item', index)" /><text></text>
							</label>
						</view>
						<view class="goods-info" >
							<view class="img">
								<image src="/static/errorImage.jpg"></image>
							</view>
							<view class="info">
								<view class="title">{{row.name}}</view>
								<view class="spec" @click="guige()">
									<view class="spec-tip">{{row.spec}}
										<image src="../../static/down.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="price-number">
									<view class="price">￥{{row.price}}</view>
									<view class="number">
										<view class="sub" @tap.stop="sub(index)" style="border-radius:8px 0px 0px 8px;">
											-
										</view>
										<view class="input" @tap.stop="discard">
											<input type="number" v-model="row.number" @input="sum($event,index)" />
										</view>
										<view class="add" @tap.stop="add(index)" style="border-radius:0px 8px 8px 0px;">
											+
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 脚部菜单 -->
		<view class="footer" :style="{bottom:footerbottom}">
			<view class="checkbox-box" @tap="allSelect">
				<label>
					<checkbox :value="0" color="#FF5E00" :checked="isAllselected" /><text></text>
				</label>
				<view class="text">全选</view>
			</view>

			<view class="settlement" v-if="!checkHide">
				<view class="sum uni-column">
					<view class="uni-flex uni-justify-end">
						合计:<view class="money">￥{{sumPrice}}</view>
					</view>
					<view class="color999 font20 uni-flex uni-justify-end" v-show="selectedList.length>0">
						不含运费
					</view>
				</view>
				<view class="btn" @tap="toConfirmation">结算({{selectedList.length}})</view>
			</view>
			<view class="settlement" v-else>
				<view class="delBtn" @tap="deleteList">删除({{selectedList.length}})</view>
			</view>

		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image class="product" src="/static/errorImage.jpg"></image>
					<view class="right">
						<text class="price">¥100</text>
						<text class="stock color999">库存：111件</text>
						<view class="selected color999">
							请选择：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem}}
							</text>
						</view>
						<image src="../../static/useCenter/delete-img.png" class="delete-img" @click="clickDelete"></image>
					</view>
				</view>
				<view v-for='(ProductItem,n) in simulatedDATA.specifications' :key="n" class="attr-list">
					<text class="font-back">{{ProductItem.name}}</text>
					<view class="item-list">
						<text v-for='(oItem,index) in ProductItem.children' :key="index" class="tit" :class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'selected':'']"
						 @click="specificationBtn(oItem.label,n,$event,index,oItem.key)">
							{{oItem.label}}
						</text>
					</view>

				</view>
				<view class="number">
					<text class="font36 colorfont font-back" style="height: 50upx;display: inline-block;">数量</text>
					<view class="number-right">
						<text class="reduce active" @tap.stop="sub()">-</text>
						<text class="font36 colorfont">{{goodsNumber}}</text>
						<text class="add" @tap.stop="add()">+</text>
					</view>
				</view>
				<view class="btns" style="display: flex;">
					<button class="btn" @click="clickMask('car')" v-if="btnStatus==0||btnStatus==2">加入购物车</button>
					<button class="btn" @click="clickMask('buy')" v-if="btnStatus==1||btnStatus==2">立即购买</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sumPrice: '0.00',
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				selectedList: [],
				isAllselected: false,
				goodsList: [{
						id: 1,
						img: '/static/img/goods/p1.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 2,
						img: '/static/img/goods/p2.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 3,
						img: '/static/img/goods/p3.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 4,
						img: '/static/img/goods/p4.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 5,
						img: '/static/img/goods/p5.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}
				],
				//控制滑动效果
				theIndex: null,
				oldIndex: null,
				isStop: false,
				checkHide: false,
				specClass: 'none',
				specSelected: ['请选择颜色', '尺码'],
				simulatedDATA: { // 模拟后台返回的数据 多规格
					'difference': {
						"49-60": {
							"goods_list_id": 100243,
							"spec_key": "49-60",
							"spec_txt": "白色::165/S",
							"goods_sn": "6712177455",
							"svip_price": 201,
							"vip_price": 301,
							"sale_price": 401,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/3d14080bcd493b11c9f9300e67d2d347.jpg",
							"package_stock": 443,
							"status": 1
						},
						"49-61": {
							"goods_list_id": 100244,
							"spec_key": "49-61",
							"spec_txt": "白色::170/M",
							"goods_sn": "6712177451",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/3d14080bcd493b11c9f9300e67d2d347.jpg",
							"package_stock": 450,
							"status": 1
						},
						"49-55": {
							"goods_list_id": 100245,
							"spec_key": "49-55",
							"spec_txt": "白色::175/L",
							"goods_sn": "6712177453",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/3d14080bcd493b11c9f9300e67d2d347.jpg",
							"package_stock": 427,
							"status": 1
						},
						"49-56": {
							"goods_list_id": 100246,
							"spec_key": "49-56",
							"spec_txt": "白色::180/XL",
							"goods_sn": "6712177450",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/3d14080bcd493b11c9f9300e67d2d347.jpg",
							"package_stock": 447,
							"status": 1
						},
						"49-57": {
							"goods_list_id": 100247,
							"spec_key": "49-57",
							"spec_txt": "白色::185/XXL",
							"goods_sn": "6712177453",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/3d14080bcd493b11c9f9300e67d2d347.jpg",
							"package_stock": 453,
							"status": 1
						},
						"84-60": {
							"goods_list_id": 100248,
							"spec_key": "84-60",
							"spec_txt": "毛衣+包组合::165/S",
							"goods_sn": "6712177453",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/f33ec105f7bd08301d8853a87f4cdcca.jpg",
							"package_stock": 451,
							"status": 1
						},
						"84-61": {
							"goods_list_id": 100249,
							"spec_key": "84-61",
							"spec_txt": "毛衣+包组合::170/M",
							"goods_sn": "6712177453",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/f33ec105f7bd08301d8853a87f4cdcca.jpg",
							"package_stock": 451,
							"status": 1
						},
						"84-55": {
							"goods_list_id": 100250,
							"spec_key": "84-55",
							"spec_txt": "毛衣+包组合::175/L",
							"goods_sn": "6712177458",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/f33ec105f7bd08301d8853a87f4cdcca.jpg",
							"package_stock": 449,
							"status": 1
						},
						"84-56": {
							"goods_list_id": 100251,
							"spec_key": "84-56",
							"spec_txt": "毛衣+包组合::180/XL",
							"goods_sn": "6712177458",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/f33ec105f7bd08301d8853a87f4cdcca.jpg",
							"package_stock": 453,
							"status": 1
						},
						"84-57": {
							"goods_list_id": 100252,
							"spec_key": "84-57",
							"spec_txt": "毛衣+包组合::185/XXL",
							"goods_sn": "6712177451",
							"svip_price": 1,
							"vip_price": 1,
							"sale_price": 1,
							"pic": "http://api.yfkjqhw.com/uploads/19/images/20191016/f33ec105f7bd08301d8853a87f4cdcca.jpg",
							"package_stock": 452,
							"status": 1
						}
					},
					'specifications': [{
						"id": 5,
						"name": "颜色",
						"children": [{
							"label": "白色",
							"key": "49"
						}, {
							"label": "毛衣+包组合",
							"key": "84"
						}]
					}, {
						"id": 6,
						"name": "尺码",
						"children": [{
							"label": "165/S",
							"key": "60"
						}, {
							"label": "170/M",
							"key": "61"
						}, {
							"label": "175/L",
							"key": "55"
						}, {
							"label": "180/XL",
							"key": "56"
						}, {
							"label": "185/XXL",
							"key": "57"
						}]
					}]
				},
				selectArr: [], // 存放被选中的值
				selectArrKey: [], // 存放被选中的值
				shopItemInfo: {}, // 存放要和选中的值进行匹配的数据
				subIndex: [], // 是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				goodsNumber: 1,
				goodsPicChoose: '', //选择规格变换图片
				goodsContent: '', //详情数据
				chooseGoodsPrice: '', //规格价格
				btnStatus: 4,
				footerbottom: 0
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			//兼容H5下结算条位置
			// #ifdef H5
			this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
			// #endif
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		methods: {
			//加入商品 参数 goods:商品数据
			joinGoods(goods) {
				/*
				 * 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
				 * 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
				 * 一般商城购物车的增删改动作是由后端来完成的,
				 * 后端记录后返回前端更新前端缓存
				 */
				let len = this.goodsList.length;
				let isFind = false; //是否找到ID一样的商品
				for (let i = 0; i < len; i++) {
					let row = this.goodsList[i];
					if (row.id == goods.id) { //找到商品一样的商品
						this.goodsList[i].number++; //数量自增
						isFind = true; //找到一样的商品
						break; //跳出循环
					}
				}
				if (!isFind) {
					//没有找到一样的商品，新增一行到购物车商品列表头部
					this.goodsList[i].unshift(goods);
				}
			},
			// 编辑
			edit(value) {
				if (value) {
					const list = this.goodsList;
					let goodtList = list.map(item => {
						item.selected = false;
						return item;
					});
					this.goodsList = goodtList;
					this.checkHide = false;
				} else {
					this.checkHide = true;
				}

			},

			//商品跳转
			toGoods(e) {
				uni.showToast({
					title: '商品' + e.id,
					icon: "none"
				});
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},
			//跳转确认订单页面
			toConfirmation() {
				let tmpList = [];
				let len = this.goodsList.length;
				for (let i = 0; i < len; i++) {
					if (this.goodsList[i].selected) {
						tmpList.push(this.goodsList[i]);
					}
				}
				if (tmpList.length < 1) {
					uni.showToast({
						title: '请选择商品结算',
						icon: 'none'
					});
					return;
				}
				uni.setStorage({
					key: 'buylist',
					data: tmpList,
					success: () => {
						uni.navigateTo({
							url: '../../order/confirmation'
						})
					}
				})
			},
			//删除商品
			deleteGoods(id) {
				let len = this.goodsList.length;
				for (let i = 0; i < len; i++) {
					if (id == this.goodsList[i].id) {
						this.goodsList.splice(i, 1);
						break;
					}
				}
				this.selectedList.splice(this.selectedList.indexOf(id), 1);
				this.sum();
				this.oldIndex = null;
				this.theIndex = null;
			},
			// 删除商品s
			deleteList() {
				let len = this.selectedList.length;
				while (this.selectedList.length > 0) {
					this.deleteGoods(this.selectedList[0]);
				}
				this.selectedList = [];
				this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length > 0;
				this.sum();
			},
			// 选中商品
			selected(index) {
				this.goodsList[index].selected = this.goodsList[index].selected ? false : true;
				let i = this.selectedList.indexOf(this.goodsList[index].id);
				i > -1 ? this.selectedList.splice(i, 1) : this.selectedList.push(this.goodsList[index].id);
				this.isAllselected = this.selectedList.length == this.goodsList.length;
				this.sum();
			},
			//全选
			allSelect() {
				let len = this.goodsList.length;
				let arr = [];
				for (let i = 0; i < len; i++) {
					this.goodsList[i].selected = this.isAllselected ? false : true;
					arr.push(this.goodsList[i].id);
				}
				this.selectedList = this.isAllselected ? [] : arr;
				this.isAllselected = this.isAllselected || this.goodsList.length == 0 ? false : true;
				this.sum();
			},
			// 减少数量
			sub(index) {
				if (this.goodsList[index].number <= 1) {
					return;
				}
				this.goodsList[index].number--;
				this.sum();
			},
			// 增加数量
			add(index) {
				this.goodsList[index].number++;
				this.sum();
			},
			// 合计
			sum(e, index) {
				this.sumPrice = 0;
				let len = this.goodsList.length;
				for (let i = 0; i < len; i++) {
					if (this.goodsList[i].selected) {
						if (e && i == index) {
							this.sumPrice = this.sumPrice + (e.detail.value * this.goodsList[i].price);
						} else {
							this.sumPrice = this.sumPrice + (this.goodsList[i].number * this.goodsList[i].price);
						}
					}
				}
				this.sumPrice = this.sumPrice.toFixed(2);
			},
			/**
			 * 规格
			 */
			guige(){
				this.btnStatus=2;
				this.toggleSpec();
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			stopPrevent() {},
			discard() {
				//丢弃
			}


		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	checkbox .wx-checkbox-input {
		border-radius: 50%;
	}

	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #FF5E00;
		box-shadow: 0px 6upx 10upx rgba(255, 94, 0, 0.2);
		border: none;
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	.edit-row {
		width: 100%;
		background: rgba(245, 245, 250, 1);
		padding: 24upx 35upx;
		text-align: right;
		display: flex;
		justify-content: space-between;
	}

	.checkbox-box {
		display: flex;
		align-items: center;

		.checkbox {
			width: 35upx;
			height: 35upx;
			border-radius: 100%;
			border: solid 2upx #f06c7a;
			display: flex;
			justify-content: center;
			align-items: center;

			.on {
				width: 25upx;
				height: 25upx;
				border-radius: 100%;
				background-color: #f06c7a;
			}
		}

		.text {
			font-size: 28upx;
			margin-left: 10upx;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.title {
			font-size: 36upx;
		}

	}

	.place {

		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.goods-list {
		width: 100%;
		padding: 20upx 0 120upx 0;

		.tis {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
		}

		.row {
			width: 100%;
			height: 220upx;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;
			margin-top: 40rpx;

			.carrier {
				@keyframes showMenu {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-30%);
					}
				}

				@keyframes closeMenu {
					0% {
						transform: translateX(-30%);
					}

					100% {
						transform: translateX(0);
					}
				}

				&.open {
					animation: showMenu 0.25s linear both;
				}

				&.close {
					animation: closeMenu 0.15s linear both;
				}

				background-color: #fff;

				.checkbox-box {
					flex-shrink: 0;
					height: 180upx;
					min-width: 40px;
				}

				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;

				.goods-info {
					width: 100%;
					display: flex;
					padding-right: 20upx;
					padding-left: 10upx;

					.img {
						width: 180upx;
						height: 180upx;
						border-radius: 10upx;
						overflow: hidden;
						flex-shrink: 0;
						margin-right: 10upx;

						image {
							width: 180upx;
							height: 180upx;
						}
					}

					.info {
						width: 100%;
						height: 180upx;
						overflow: hidden;
						display: flex;
						position: relative;
						justify-content: space-between;
						flex-direction: column;
						padding-left: 10upx;

						.title {
							width: 100%;
							font-size: 28upx;
							color: #0B0E11;
							height: 100upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.spec {
							width: 100%;
							display: flex;

						}

						.spec-tip {
							font-size: 24upx;
							background: rgba(245, 245, 250, 1);
							color: #8E8E93;
							height: 30upx;
							display: flex;
							align-items: center;
							padding: 4upx 14upx;
							border-radius: 8upx;

							image {
								width: 16upx;
								height: auto;
								margin-left: 10upx;
							}
						}

						.price-number {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							font-size: 28upx;
							height: 60upx;

							.price {
								color: #FE2130;
								font-size: 30upx;
								font-weight: bold;
							}

							.number {
								display: flex;
								justify-content: center;
								align-items: flex-end;

								.input {
									width: 60upx;
									height: 40upx;
									background: rgba(229, 229, 229, 1);

									input {
										width: 60upx;
										height: 40upx;
										display: flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										font-size: 26upx;
									}
								}

								.sub,
								.add {
									width: 40upx;
									height: 40upx;
									background: rgba(245, 245, 250, 1);

									text-align: center;
									line-height: 40upx;
									font-size: 26upx;
									color: #0B0E11;
									display: inline-block;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}

	.footer {
		width: 100%;
		padding: 0 36upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 -10upx 30upx rgba(0, 0, 0, 0.04);
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;

		.delBtn {
			border: solid 1upx #0B0E11;
			color: #0B0E11;
			padding: 0 50upx;
			height: 70upx;
			border-radius: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.settlement {
			width: 80%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.sum {
				width: 50%;
				font-size: 28upx;
				margin-right: 30upx;
				display: flex;
				justify-content: flex-end;

				.money {
					font-size: 28upx;
					color: #FF5E00;
				}
			}

			.btn {
				padding: 0 50upx;
				height: 70upx;
				background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 60upx;
			}
		}
	}

	.item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 36rpx;

		.item-store {
			display: flex;
			align-items: center;

			.store {
				display: flex;
				align-items: center;
				margin-left: 36upx;

				image {
					width: 32rpx;
					height: auto;
				}
			}
		}
	}
	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;
	
		.number {
			display: flex;
			justify-content: space-between;
			padding-left: 10upx;
			margin: 50upx 0;
			position: relative;
		}
	
		.font-back {
			position: relative;
		}
	
		.font-back:after {
			content: '';
			width: 100upx;
			height: 20upx;
			background: rgba(249, 202, 0, 1);
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}
	
		.number-right .reduce {
			width: 68upx;
			height: 53upx;
			background: rgba(245, 245, 250, 1);
			border-radius: 15upx;
			text-align: center;
			line-height: 53upx;
			font-size: 36upx;
			color: #0B0E11;
			display: inline-block;
			font-weight: bold;
			margin-right: 40upx;
		}
	
		.number-right .reduce.active {
			font-weight: 100;
			color: #999;
		}
	
		.number-right .add {
			width: 68upx;
			height: 53upx;
			background: rgba(245, 245, 250, 1);
			border-radius: 15upx;
			text-align: center;
			line-height: 53upx;
			font-size: 36upx;
			color: #0B0E11;
			display: inline-block;
			font-weight: bold;
			margin-left: 40upx;
		}
	
		.a-t {
			display: flex;
	
			.product {
				width: 200upx;
				height: 200upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 50%;
				border: 6rpx solid #fff;
			}
	
			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;
				padding-top: 20rpx;
	
				.price {
					font-size: 36upx;
					color: #FE2130;
					margin-bottom: 10upx;
				}
	
				.selected-text {
					margin-right: 10upx;
				}
			}
		}
		.delete-img{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
		}
	
		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 8upx;
			color: #0B0E11;
			padding-top: 30upx;
			padding-left: 10upx;
			position: relative;
	
			.font-back {
				position: relative;
			}
	
			.font-back:after {
				content: '';
				width: 100upx;
				height: 20upx;
				background: rgba(249, 202, 0, 1);
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: -1;
			}
		}
	
		.item-list {
			padding: 40upx 0 0;
			display: flex;
			flex-wrap: wrap;
	
			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F5F5FA;
				margin-right: 60upx;
				margin-bottom: 20upx;
				border-radius: 20upx;
				min-width: 160upx;
				height: 54upx;
				padding: 0 20upx;
				font-size: 28upx;
				color: #0B0E11;
			}
	
			.selected {
				background: #F9CA00;
				color: #0B0E11;
			}
	
			.noneActive {
				background-color: #ccc;
				opacity: 0.4;
				color: #000;
				pointer-events: none;
			}
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}


		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 40upx 40upx 0px 0px;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: #FF5E00;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30rpx;
				flex: 1;

			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
